import route from '../internal/mixins/route';
export default {
  name: 'co-button',
  mixins: [route],
  props: {
    color: {
      type: String
    },
    block: Boolean,
    disabled: Boolean,
    round: Boolean,
    outline: Boolean,
    loading: Boolean
  },
  methods: {
    // eslint-disable-next-line no-unused-vars
    createCircular (h) {
      return <div class="co-circle-wrapper active">
        <div staticClass="co-circle-spinner active">
          <div staticClass="co-circle-clipper left">
            <div staticClass="co-circle" />
          </div>
          <div staticClass="co-circle-gap-patch left">
            <div staticClass="co-circle" />
          </div>
          <div staticClass="co-circle-clipper right">
            <div staticClass="co-circle" />
          </div>
        </div>
      </div>;
    }
  },
  render (h) {
    const tagName = this.to ? 'router-link' : this.tag ? this.tag : 'button';
    const data = {
      staticClass: 'co-button',
      class: {
        'co-button--block': this.block,
        'co-button--round': this.round,
        'co-button--outline': this.outline,
        ['co-button--' + this.color]: !!this.color,
        'co-button--disabled': this.disabled
      },
      props: {
        ...(this.to ? this.generateRouteProps() : {})
      },
      attrs: {
        ...this.$attrs,
        disabled: this.disabled
      },
      [this.to ? 'nativeOn' : 'on']: {
        ...this.$listeners,
        click: (e) => {
          if (this.disabled || this.loading) return;
          this.$emit('click', e);
        }
      }
    };
    return h(tagName, data, [
      h('div', {
        staticClass: 'co-button__wrapper'
      }, this.loading ? [this.createCircular(h)] : this.$slots.default)
    ]);
  }
};
